/* Full-bleed film with title and transparent controls within the picture. */
.dc-home-film{border-bottom:1px solid #e5e5e5}
.dc-film-stage,.dc-film-player{position:relative;isolation:isolate;background:#1b1917}
.dc-film-stage{width:100%}
.dc-film-stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1b1917}
.dc-film-heading{position:absolute;left:var(--pad,4vw);bottom:32px;z-index:2;margin:0;max-width:16ch;font:400 clamp(30px,4.3vw,68px)/1.05 var(--sans);letter-spacing:-.035em;color:#fff;pointer-events:none}
.dc-film-playback,.dc-project-film-controls{position:absolute;right:var(--pad,4vw);bottom:24px;z-index:3;display:flex;align-items:center;gap:8px;color:#fff;mix-blend-mode:normal}
.dc-film-playback button,.dc-project-film-controls button{display:grid;place-items:center;width:44px;height:44px;padding:9px;margin:0;background:none;border:0;border-radius:0;color:inherit;cursor:pointer;transition:transform .15s}
.dc-film-playback svg,.dc-project-film-controls svg{display:block;width:26px;height:26px;pointer-events:none}
.dc-film-playback button:hover,.dc-project-film-controls button:hover{transform:scale(1.1)}
.dc-film-playback button:focus-visible,.dc-project-film-controls button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.dc-film-stage:fullscreen,.dc-film-player:fullscreen{width:100%;height:100%;max-width:none}
.dc-film-stage:fullscreen video,.dc-film-player:fullscreen video{width:100%;height:100%;max-height:none;object-fit:contain}
.dc-film-credits{margin:0 0 32px;font-size:12px;line-height:1.6;color:#666;max-width:700px}
.dc-film-credits summary{cursor:pointer;width:max-content;text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.dc-film-credits p{margin:8px 0}.dc-film-credits a{text-decoration:underline;text-underline-offset:3px}
.dc-project-film{margin:0 0 80px}.dc-project-film h2{font:400 clamp(26px,3vw,40px)/1.2 var(--serif);margin:0 0 24px}
.dc-project-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1b1917}
.dc-project-film>p{font-size:12px;line-height:1.6;color:#666;margin:14px 0 0}
.dc-project-film-controls{right:16px;bottom:12px}
.dc-project-film video:focus-visible{outline:2px solid #1b1917;outline-offset:4px}
.dc-project-film--portrait{display:grid;grid-template-columns:1fr minmax(240px,420px);gap:60px;align-items:center;padding-top:50px;border-top:1px solid #ddd}
.dc-project-film--portrait>div{max-width:42ch}.dc-project-film--portrait p{font-size:14px;line-height:1.7}
.dc-project-film--portrait .dc-film-player{width:100%;max-width:none;max-height:78svh;aspect-ratio:9/16;justify-self:end}
.dc-project-film--portrait video{width:100%;height:100%;aspect-ratio:9/16;object-fit:cover;max-height:78svh}
@media(max-width:720px){
 .dc-film-heading{font-size:clamp(26px,6.8vw,42px);left:20px;bottom:66px;max-width:18ch}
 .dc-film-playback{right:14px;bottom:8px;gap:4px}
 .dc-project-film{margin-bottom:48px}
 .dc-project-film--portrait{grid-template-columns:1fr;gap:28px}
 .dc-project-film--portrait .dc-film-player{max-height:75svh;width:auto;max-width:100%;justify-self:center}
 .dc-project-film--portrait video{max-height:75svh}
}
@media(prefers-reduced-motion:reduce){.dc-film-playback button,.dc-project-film-controls button{transition:none}}
.dc-collections-intro.dc-map-intro{display:block}
.dc-collections-intro>div:first-child{max-width:640px;margin-bottom:44px}
.dc-home-collection-label{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 0;font-size:13px;border-bottom:1px solid #ddd}
.dc-home-collection-label span:last-child{transition:transform .2s}
.dc-home-collections .coll-tile:hover .dc-home-collection-label span:last-child{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){.dc-home-collection-label span:last-child{transition:none}}



/* MOBILE: Explore-the-collections = the TILES, two columns, animated marks at rest; the row in the CENTRE of the screen
   shows its photograph and its name (the desktop hover, driven by scroll position — (C) home-motion.js sets .is-centre).
   No other text. (Driaan 2026-09-22, replacing the 21 Sept title-rows list: "the thumbnails should be there with the
   animated icons… a column of two… as soon as the icon is in the centre of the phone it should show the photo… and the name.") */
@media(max-width:640px){
 .dc-home-collections{display:grid!important;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px!important}
 .dc-home-collections .coll-tile{display:block!important}
 .dc-home-collections .coll-tile-media{display:block!important}
 .dc-home-collections .dc-home-collection-label{display:none!important}
 /* rest = the desktop rest state (styles-sculpture.css's touch rule would otherwise show every photo and caption at once) */
 .dc-home-collections .coll-tile-img{opacity:0;transform:scale(1.03)}
 .dc-home-collections .coll-tile-mark{filter:brightness(0) invert(0);opacity:.6;transform:translate(-50%,-50%)}
 .dc-home-collections .coll-tile-cap{opacity:0;transform:translateY(10px);padding:36px 12px 12px}
 .dc-home-collections .coll-tile-name{font-size:1.05rem}
 .dc-home-collections .coll-tile-stmt{display:none}
 /* centred = the desktop hover */
 .dc-home-collections .coll-tile.is-centre .coll-tile-img{opacity:1;transform:scale(1.06)}
 .dc-home-collections .coll-tile.is-centre .coll-tile-mark{filter:brightness(0) invert(1);opacity:1;transform:translate(-50%,-78%) scale(.94)}
 .dc-home-collections .coll-tile--darkmark.is-centre .coll-tile-mark{filter:brightness(0) invert(0);opacity:.92}
 .dc-home-collections .coll-tile.is-centre .coll-tile-cap{opacity:1;transform:none}
}